<template>
	<view class="box">
		<!-- 背景 -->
		<view class="bg"></view>

		<view class="header">
			<!-- 背景图片 -->
			<image class="header-img" mode="widthFix" src="/static/in_fuli/1.png">
			</image>
            <view class="header-user">
                <u-row>
                    <u-col span="3">
                        <view>
                            <image class="header-user-img" mode="aspectFit" :src="userSelf.image_url"></image>
                        </view>
                    </u-col>
                    <u-col span="9">
                        <view class="header-user-info" v-if="false">
                            <view class="header-user-name">{{ userSelf.nickName }}</view>
                            <view class="header-user-phone">{{ userSelf.phone }}</view>
                        </view>
                    </u-col>
                </u-row>
            </view>
		</view>
		
		<!-- 按钮区域 -->
		<view class="header-btn-box">
			<view class="header-btn">
				<view class="header-btn-text" @click="toPage('/pages/wodefuli')">我的福利</view>
			</view>
			<view class="header-btn">
				<view class="header-btn-text" @click="toPage('/pages/fulidating')">福利大厅</view>
			</view>
		</view>
		
		<view class="height-header"></view>

		<SubsectionBox flag="zcjl" name="注册接龙" />
	</view>
</template>

<script>
import SubsectionBox from './in-fuli/components/SubsectionBox.vue'

export default {
	components: {
		SubsectionBox
	},
	data() {
		return {
			list: [
				{
					"content": "1、活动规则：活动期间。。。。。2、活动奖励", //活动内容文案
					"createTime": "2023-03-21 16:42:11", //创建时间
					"endTime": "2023-03-21 16:41:54", //结束时间
					"flag": "sss", //活动标识
					"homeUrl": "//活动主页地址", //活动主页地址
					"id": 1, //活动id
					"name": "邀请引流", //活动名称
					"result": "活动结果", //活动结果
					"shareUrl": "//活动分享地址", //活动分享地址
					"sort": 1, //活动排序
					"startTime": "2023-03-21 16:41:51", //开始时间
					"status": 1 //活动状态 0无效 1生效
				}
			],
			userSelf: {
                "createAt": "2023-01-30 17:32:31",
                "image_url": "https://thirdwx.qlogo.cn/mmopen/vi_32/U74glmWRaf6zbxxAho7lUicOdxhdajJOuwdWI8cvtneALzBwnibqGcBDI3vyQtjPjTVNJfF06uUD6xBhsLVibLcsw/132",
                "nickName": "悟",
                "phone": "18370036521",
            }
		}
	},
	
	onLoad(options) {
		var token=uni.getStorageSync('token');
        if(token==null||token==''){
            uni.setStorageSync('token', options.token)
        }
        this.getList();
        this.getUserSelf();
	},
	methods: {
		toPage(url) {
			this.$kt.util.navTo(url+"?token="+uni.getStorageSync('token'))
		},
		getUserSelf() {
            this.$kt.request.request({
                api: this.$api.user.getUserInfoSelf,
                stateSuccess: (res) => {
                    this.userSelf = res.data;
                }
            });
        },
		getList() {
			this.$kt.request.request({
				api: this.$api.taskActivity.getList,
				stateSuccess: (res) => {
					this.list = res.data
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(239, 63, 42);
	z-index: -1;
}

.box {
	padding: 30rpx;
	box-sizing: border-box;
}

.height-header {
	height: 300rpx;
}

.header {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;

	.header-img {
		position: absolute;
		top: 0;
		opacity: .8;
		left: 0;
		width: 100%;
		z-index: -1;
	}
	
	
    .header-user {
		position: absolute;
        display: inline-block;
        top: 20rpx;
        width: 500rpx;
        padding: 30rpx 30rpx 0 0;
        box-sizing: border-box;
        left: 20rpx;
		
        .header-user-img {
			position: relative;
            top: 0;
            left: 0;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            overflow: hidden;
			border:6rpx solid #fff;
        }

        .header-user-info {
            position: absolute;
            top: 30rpx;
            left: 0;
            width: 100%;
            padding: 0 0 0 120rpx;
            box-sizing: border-box;

            .header-user-name {
                font-size: 40rpx;
                font-weight: bold;
                text-shadow: 0 5rpx 5rpx #f75243;
				color: #fff;
			}

            .header-user-phone {
                font-size: 30rpx;
				color: #fff;
				font-weight: bold;
                text-shadow: 0 5rpx 5rpx #f75243;
            }
            
        }
    }
}

.header-btn-box {
	position: absolute;
	top: 20rpx;
	right: 30rpx;
	z-index: 100;

	.header-btn {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 35rpx;
		font-weight: bold;
		color: #fff;
	}
}


.header-btn:active {
	opacity: .7;
}
</style>
